<template>
  <div class="nav-box">
    <div
      class="date-bar"
      @click="goToMonthArticlesView"
    >
      <div class="day">
        <transition name="move">
          <span
            class="text"
            :key="date.day"
          >{{dayComp}}</span>
        </transition>
      </div>
      <div class="month">
        <transition name="move">
          <span
            class="text"
            :key="date.month"
          >{{date.month}}.</span>
        </transition>
      </div>
      <div class="year">
        <transition name="move">
          <span
            class="text"
            :key="date.year"
          >{{date.year}}</span>
        </transition>
      </div>

      <span
        class="tail"
        :class="rotate==true?'tail':'top-tail'"
      ></span>

    </div>
    <div class="title-bar">
      <span>{{weather.city_name}}</span>
      <span>·</span>
      <span>{{weather.climate}}</span>
      <span>{{weather.temperature}}℃</span>
      <!-- <span>{{playStatus}}</span> -->
    </div>
  </div>
</template>

<script>
export default {
  name: "HomeViewNav",
  props: {
    weather: Object,
    date: Object,
    playStatus: Boolean,
  },
  data() {
    return {
      rotate: true,
      day: "",
      month: "",
      year: "",
    };
  },

  mounted() {
    // console.log(this.date.day);
    // console.log(this.$route.path);
  },
  watch: {
    // date() {
    //   console.log(this.date.day);
    //   console.log(this.date.month);
    //   console.log(this.date.year);
    //   this.day = this.date.day;
    //   this.month =this.date.month;
    //   this.year = this.date.year;
    // },
  },
  methods: {
    // 路由跳转页面
    goToMonthArticlesView() {
      if (this.$route.name == "month-article") {
        this.$router.go(-1);
      } else {
        this.$router.push(
          `${this.$route.path}/month-article?month=${this.month}&date=${this.weather.date}`
          // `${this.$route.path}/month-artcle`
        );
      }
      this.rotate = !this.rotate;
    },
  },
  computed: {
    dayComp() {
      return this.date.day < 10 ? "0" + this.date.day : this.date.day;
    },
  },
};
</script>

<style lang="scss" scoped>
.nav-box {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: white;
  padding: 40px 10px 20px;
  overflow: hidden;
  box-sizing: border-box;
  z-index: 99;
  .date-bar {
    display: flex;
  }
  .day,
  .month,
  .year {
    position: relative;
  }
  .day {
    flex: 0 0 35px;
    font-size: 35px;
    margin-right: 7px;
    top: -20px;
  }
  .month {
    flex: 0 0 24px;
    font-size: 12px;
  }
  .year {
    flex: 0 0 25px;
    font-size: 12px;
  }
  .text {
    position: absolute;
    top: 0;
    left: 0;
    font-weight: bold;
  }
  .tail {
    margin-left: 7px;
    border: 10px solid black;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 0;
    width: 0;
    height: 0;
    transition: all 0.3s linear;

    &.top-tail {
      transition: all 0.3s linear;
      transform: rotate(180deg);
    }
  }

  .title-bar {
    margin: 0 5px;
    font-size: 14px;
    color: rgb(160, 156, 156);
    span {
      margin: 0 5px;
    }
  }
  .move-enter {
    transform: translateY(100%);
  }
  .move-leave-to {
    transform: translateY(-100%);
  }
  .move-enter-active,
  .move-leave-active {
    transition: all 0.5s linear;
  }
  .move-leave,
  .move-enter-to {
    transform: translateY(0);
  }
}
</style>